<template>
    <div class="singerbox">
        <!-- 歌手页 -->
        <!-- 顶部 -->
        <div v-show="you">
            <mytop v-bind:thisname="sing.name" v-bind:gdm="sin"></mytop>
            <!-- 头部的部分 -->
            <div class="singertop">
                <img v-lazy="sing.src" alt="">
                <div class="singerzz"></div>
            </div>

            <div class="singname">
                <p>{{sing.name}}</p>
            </div>

            <!-- 底下的轮播图部分 -->
            <div class="singlbt">
                <ol class="singtop">
                    <li :class="{'singactive':downnum==0}" @touchstart="dianji(0)">
                        主页
                    </li>
                    <li :class="{'singactive':downnum==1}" @touchstart="dianji(1)">
                        热门歌曲
                    </li>
                    <li :class="{'singactive':downnum==2}" @touchstart="dianji(2)">
                        专辑 <span>{{zjnum}}</span> 
                    </li>
                </ol>
                <ul class="sinul">
                    <li class="singdown" v-show="downnum==0">
                        <div class="diyi">
                            <div class="yrbktop">艺人百科</div>
                            <p><span>艺名：</span>{{sing.name}}</p>
                            <p v-show="sing.zwm!==''"><span>译名：</span>{{sing.zwm}}</p>
                            <p><span>地区：</span>{{sing.type}}</p>
                            <p><span>歌手简介：</span>{{sing.xq}}</p>
                        </div>
                    </li>
                    <li class="singdown" v-show="downnum==1">
                        <ul class="geul" v-show="!ge">
                            <li v-for="(item,index) in hotsong" :key="item.id">
                                <listone v-bind:myid="item.id" v-bind:myindex="index" v-bind:mypeople="item.people" v-bind:myname="item.name">
                                    <template v-slot:name> 
                                        {{item.name}}
                                    </template>
                                    <template v-slot:people> 
                                        {{item.people}}
                                    </template>
                                </listone>
                            </li>
                            <li @click="chakanquanbu">
                                点击查看全部歌曲 ›
                            </li>
                        </ul>
                        <loading v-show="ge"></loading>
                    </li>
                    <li class="singdown" v-show="downnum==2">
                        <ul class="singzj" v-show="!zj">
                            <li v-for="(item,index) in alarr" :key="index">
                                <alone v-bind:mysrc="item.src" v-bind:myname="item.name" v-bind:mynum="item.num" v-bind:myid="item.id"></alone>
                            </li>
                        </ul>
                        <loading v-show="zj"></loading>
                    </li>
                </ul>
            </div>
        </div>
        <loading v-show="!you" :style="{height:ksgd+'px'}"></loading>
    </div>
</template>
<script>
import listone from "../small/listone.vue"
import mytop from "../small/movetop.vue"
import loading from "../small/loading.vue"
import alone from "../small/alone.vue"
export default {
    name:"singer",
    data(){
        return {
            ksgd:0,
            singid:0,

            sing:{
                name:'',
                xq:"",
                zwm:"",
                // type : 地区 1: 华语 2: 欧美 3: 韩国 4: 日本
                type:'',
                src:'',
                tx:"",
            },
            zjnum:0,
            
            // 顶部歌手名
            sin:2,

            you:false,

            // 第二块
            dier:false,
            ge:true,
            hotsong:[],

            // 第三块
            disan:false,
            zj:true,
            alarr:[],

            // 轮播图
            tim: null,
            num: 0,
            downnum: 0,
            yidong: 0,
            width: 0,
            huadonggaibian: 0,
            changecli: 0,
            jl: null,
            huadong: 0,
            bala: false
        }
    },
    components:{
        loading,
        mytop,
        listone,
        alone
    },
    created(){
        // console.log(this.$route.query)
        this.ksgd = document.documentElement.clientHeight || documentbody.clientHeight;
        this.singid = this.$route.query.id
        this.getdata()
        this.width = document.documentElement.clientWidth || documentbody.clientWidth;
    },
    methods:{
        getdata(){
            axios.get(`https://apis.netstart.cn/music/artist/detail?id=${this.singid}`).then(
                res=>{
                    // console.log(res)
                    this.zjnum = res.data.data.artist.albumSize
                    this.sing.name = res.data.data.artist.name
                    this.sing.xq = res.data.data.artist.briefDesc
                    this.sing.src = res.data.data.artist.cover
                    if(res.data.data.artist.transNames[0]!==undefined){
                        this.sing.zwm = res.data.data.artist.transNames[0]
                    }
                    let biglx = res.data.data.artist.rank
                    if(biglx != null){
                        let lx = biglx.type
                        if(lx == 1){
                            this.sing.type = "华语"
                        }else if(lx == 2){
                            this.sing.type = "欧美"
                        }else if(lx == 3){
                            this.sing.type = "韩国"
                        }else if(lx == 4){
                            this.sing.type = "日本"
                        }else{
                            this.sing.type = "未明"
                        }
                    }else{
                        this.sing.type = "未明"
                    }
                    // 有译名
                    if(res.data.data.artist.transNames[0]!==undefined){
                        this.sing.zwm = res.data.data.artist.transNames[0]
                    }
                    // 有头像
                    if(res.data.data.showPriMsg !== false){
                        this.sing.tx = res.data.data.user.avatarUrl
                    }
                    this.you = true
                },
                err=>{
                    console.log(err)
                }
             )
        },
        gethotsong(){
            axios.get(`https://apis.netstart.cn/music/artist/top/song?id=${this.singid}`).then(
                res=>{
                    // console.log(res)
                    this.hotsong = []
                    let song = res.data.songs.slice(0,25)
                    for(let i = 0;i<song.length;i++){
                        let obj = {}
                        obj.name = song[i].name
                        obj.id = song[i].id
                        obj.people = ""
                        for(let j = 0;j<song[i].ar.length;j++){
                            if(j == 0){
                                obj.people = song[i].ar[j].name
                            }else{
                                obj.people += "/"+song[i].ar[j].name
                            }
                            // console.log(song[i].ar[j])
                        }
                        this.hotsong.push(obj)
                    }
                    this.ge = false
                },
                err=>{
                    console.log(err)
                }
            )
        },
        getalbum(){
            axios.get(`https://apis.netstart.cn/music/artist/album?id=${this.singid}&limit=30`).then(
                res=>{
                    // console.log(res)
                    let al = res.data.hotAlbums
                    for(let i = 0;i<al.length;i++){
                        let obj = {}
                        obj.name = al[i].name
                        obj.id = al[i].id
                        obj.src = al[i].picUrl
                        obj.num = al[i].size
                        this.alarr.push(obj)
                    }
                    this.zj = false
                },
                err=>{
                    console.log(err)
                }
            )
        },
        chakanquanbu(){
            this.$router.push({path:'/singerall', query:{singerid:this.singid}})
        },
        jieshu() {
            // if (this.num >= 4) {
            //     this.yidong = 0;
            //     this.num = 0;
            //     this.yidongdonghua = "";
            // }
        },
        dianji(index) {
            this.downnum = index;
            if(index == 1 && this.dier == false){
                this.dier = true
                this.gethotsong()
            }
            if(index == 2 && this.disan == false){
                // console.log("进入到第三个")
                this.disan = true
                this.getalbum()
            }
        },
    }
}
</script>
<style lang="less" scoped>
.singerbox{
    position: relative;
    min-height:100%;
    background: rgba(0, 0, 0, 0.02);
    // height:2200px;
}
.singertop{
    width:100%;
    position: relative;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 30%;
    overflow: hidden;
    img{
        width:100%;
    }
    .singerzz{
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        background: rgba(0, 0, 0, 0.05);
    }
}
.singname{
    position:relative;
    z-index:10;
    width:90%;
    margin:0 auto;
    border-radius: 8px;
    background: white;
    // height:50px;
    margin-top:-40px;
    padding-top:20px;
    padding-bottom:20px;
    text-align: center;
    font-size:18px;
    font-weight: bolder;
    p{
        margin: 0;
    }
}
  .diyi{
    width:90%;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 8px;
    padding:15px;
    // padding-left:20px;
    background:white;
    margin:0 auto;
    margin-bottom:20px;
    .yrbktop{
        font-size:18px;
        font-weight: bolder; 
    }
    p{
        margin-top:5px;
        margin-bottom: 5px;
        line-height:30px;
        span{
            color:#999;
        }
    }
  }
  .singlbt{
      width:100%;
    //   height: ;
    .singtop{
        width:90%;
        margin:0 auto;
        display:flex;
        justify-content: space-between;
        // padding-top:10px;

        li{
            padding:20px;
            position: relative;
            padding-bottom: 10px;
            span{
                font-size:13px;
                color:#888;
            }
        }
        .singactive{
            font-weight: bolder;
            position: relative;
            &::after{
                content: " ";
                width:65%;
                position: absolute;
                top:65%;
                left:50%;
                transform: translateX(-50%);
                height:10px;
                background: #4476b785;
                border-radius: 10px;
            }
        }
    }
  }
  .sinul{
      width:100%;
      display:flex;

      .singdown{
        min-height: 250px;
          width:100%;
      }
      .singdown:nth-child(1){
        margin-top: 10px;
      }
  }
  .geul{
      width: 100%;
      position: relative;
      min-height: 70%;
      padding-bottom: 20px;
      li{
        margin-bottom: 10px;
        position: relative;
        padding: 10px;
        box-sizing: border-box;
        margin: 10px auto;
        border-radius: 10px;
        background-color: white;
        width: 90%;
        &:last-child{
            background: none;
            text-align: center;
            font-size: 18px;
        }
      }
  }
  .singzj{
      width:100%;
      
  }
</style>